<template>
	<view class="wrap">
		<view class="wrap-list">
			<view class="wrap-list-info">
				<view class="wrap-list-info-content align-center">
					<view class="wrap-list-info-content-atv">
						<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx"
							radius="12rpx"></up-image>
					</view>
					<view class="wrap-list-info-content-name">
						<view class="wrap-list-info-title">
							昵称
						</view>
						<view class="wrap-list-info-content-name-name">
							聂小倩
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-list-appointment">
				<view class="wrap-list-appointment-title">
					询问涵
				</view>
				<view class="wrap-list-appointment-dec">
					经过线下见面相处后觉得挺轻松，状态挺好，想继续交往，不知道是否可以？
				</view>
				<view class="wrap-list-appointment-btn" @click="send">
					发送
				</view>
			</view>
		</view>
		<view class="wrap-needAccompany">
			若对方同意交往，系统将默认为您调成隐身模式，在系统中其他用户不会在看到您的信息。如果有需要请在“我的-设置-已有交往对象”中关闭。
		</view>
		<up-modal width="460rpx" :show="show" title="温馨提示" content="喜欢就大胆表达，加速牵手成功，要努力抓住幸福哦~" confirmText="继续发送" cancelText="拒绝幸福"
			:showCancelButton="true" cancelColor="#999999" confirmColor="#006FFF" @confirm="confirm" @cancel="show = false">
		</up-modal>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store'
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue"

	const show = ref(false)

	const send = () => {
		show.value = true
	}

	const confirm = () => {
		show.value = false
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;

		&-list {
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&-info {
				height: 160rpx;
				border-bottom: 2rpx solid #DEDEDE;

				&-content {
					&-name {
						margin-left: 16rpx;

						&-title {
							margin-bottom: 20rpx;
							font-size: 30rpx;
							color: #444444;
						}

						&-name {
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}
					}
				}
			}

			&-appointment {
				padding: 60rpx 0 50rpx;
				box-sizing: border-box;

				&-title {
					text-align: center;
					font-weight: bold;
					font-size: 34rpx;
					color: #222222;
				}

				&-dec {
					margin: 40rpx 0 80rpx;
					font-size: 30rpx;
					color: #444444;
				}

				&-btn {
					height: 96rpx;
					background: #FF47AB;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 96rpx;
					text-align: center;
				}
			}
		}

		&-needAccompany {
			margin-top: 30rpx;
			line-height: 36rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #FF47AB;
		}
	}
</style>